<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<title>角色修改</title>
		<!-- 导入jquery核心类库 -->
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
		<!-- 导入easyui类库 -->
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/ext/portal.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/default.css">
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/ext/jquery.portal.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/ext/jquery.cookie.js"></script>
		<script src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<!-- 导入ztree类库 -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" type="text/css" />
		<script src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				var setting = {
						data : {
							key : {
								title : "t"
							},
							simpleData : {
								enable : true
							}
						},
						check : {
							enable : true,
							chkboxType: {"Y" : "s", "N" : "ps"} 
						}
					}
				//准备将要回显的数据
				$.post("${pageContext.request.contextPath}/roleAction_findMenuByRoleId.action",{"id" :${model.id}},function(data) {
					treeNode = data;},'json');
				
				$.ajax({
                    url : '${pageContext.request.contextPath}/menuAction_findAll.action',
                    type : 'POST',
                    dataType : 'json',
                    success : function(data) {
                        //4.初始化ztree
                        $.fn.zTree.init($("#menuTree"), setting, data);
                        
                        //当角色关联的菜单数据长度大于0时,遍历角色关联的菜单数据
                        if (treeNode.length > 0) {
                            
                            //获取ztree对象
                            var treeObj = $.fn.zTree.getZTreeObj("menuTree");
                            
                            //遍历勾选角色关联的菜单数据
                            for (var i = 0; i < treeNode.length; i++) {
                                
                            //根据角色菜单节点数据的属性搜索，获取与完整菜单树完全匹配的节点JSON对象集合
                            var nodes = treeObj.getNodesByParam("id", treeNode[i].id, null);
                                
                            //勾选当前选中的节点
                            treeObj.checkNode(nodes[0],true,false);
                                
                            };
                        };
                    },
                    error : function(msg) {
                        alert('树加载异常!');
                    }
                });
              	//权限回显
    			//查询所有权限
    			var url = '${pageContext.request.contextPath}/permissionAction_findAll.action';
    	        //根据角色id查询对应权限数据的ajax URL
    	        var urlRoleId = "${pageContext.request.contextPath}/roleAction_findPermissionByRoleId.action";
   				 $.post(url,{},function(data){
    	        	 //根据角色id查询查询对应权限ajax
                    $.post(urlRoleId,{"id" : ${model.id}},function(showPermissionData){
                        //1.查询全部权限的回调数据遍历
                        for(var i = 0;i<data.length;i++){
                                //2.获取权限id
                                var id = data[i].id;
                                //alert(id);
                                //3.获取权限名称name
                                var name = data[i].name;
                                //4.获取权限多选框所在的位置,拼装权限的多选框选项
                                $('#perTD').append('<input type="checkbox" name="permissionIds" value="'+id+'" /> '+name);
                                //2.通过roleId查询权限的回调数据遍历
                                for(var j = 0;j<showPermissionData.length;j++){
                                    var pId= showPermissionData[j].id;
                                    //alert("pId  :"+pId);
                                    if(pId==id){
                                        $('input:checkbox').eq(i).attr("checked",'true');
                                        continue;//结束本层本次循环
                                    }
                                }
                        }
                   },'json')
    	        },'json');
   			// 点击保存
   				$('#save').click(function(){
   					var treeObj = $.fn.zTree.getZTreeObj("menuTree");
   					var nodes = treeObj.getCheckedNodes(true);
   					var array = new Array();
   					$(nodes).each(function(index,data){
   						array.push(data.id);
   					});
   					$("#menuIds").val(array);
   					$("#roleForm").submit();
   				});
                
			})
		</script>
	</head>

	<body class="easyui-layout">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false">
			<div class="datagrid-toolbar">
				<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存</a>
			</div>
		</div>
		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form id="roleForm" method="post" action="${pageContext.request.contextPath}/roleAction_save.action">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">角色信息</td>
					</tr>
					<tr>
						<td>名称</td>
						<td>
							<input type="hidden" name=id value="${model.id }"></input>
							<input type="text" name="name" value="${model.name }"  class="easyui-validatebox" data-options="required:true" />
							<input id="menuIds" type="hidden" name="menuIds" />
						</td>
					</tr>
					<tr>
						<td>关键字</td>
						<td>
							<input type="text" name="keyword"  value="${model.description }"  class="easyui-validatebox" data-options="required:true" />
						</td>
					</tr>
					<tr>
						<td>描述</td>
						<td>
							<textarea name="description"rows="4" cols="60">${model.description }</textarea>
						</td>
					</tr>
					<tr>
						<td>权限选择</td>
						<td id="perTD">
						
						</td>
					</tr>
					<tr>
						<td>菜单授权</td>
						<td>
							<ul id="menuTree" class="ztree"></ul>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>